<template>
  <yd-layout class="m-goods-srh">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="搜索" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
      <!-- 搜索框，否则显示搜索框 -->
      <yd-cell-item slot="center" class="m-srh-box" @click.native="$router.push('/search')">
        <yd-icon slot="left" name="search" size=".3rem" color="#999"></yd-icon>
        <yd-input slot="right"
          :placeholder="searchParams.keyword"
          :showErrorIcon="false"
          :showSuccessIcon="false"
          :showRequiredIcon="false">
        </yd-input>
      </yd-cell-item>
    </yd-navbar>

    <!-- 商品列表 tab -->
    <div slot="top" class="m-search-tab-list screen" v-if="searchParams.searchType == 'goods'">
      <button :class="{active: searchParams.orderBy == 'goods_salenum'}" @click="onSearchByOrder('goods_salenum')">销量</button>
      <button :class="{active: searchParams.orderBy == 'goods_current_price'}" @click="onSearchByOrder('goods_current_price')">价格
        <span class="t" :class="{cur: searchParams.orderType == 'asc' && searchParams.orderBy == 'goods_current_price'}"></span>
        <span class="b" :class="{cur: searchParams.orderType == 'desc' && searchParams.orderBy == 'goods_current_price'}"></span>
      </button>
    </div>
    <!-- 内容 -->
    <w-empty v-if="!searchList.length"></w-empty>
    <yd-infinitescroll :callback="loadList" ref="infiniteScroll" v-else>
      <div slot="list">
        <!-- 商品列表 -->
        <article class="goods-list">
          <yd-list theme="1">
            <yd-list-item v-for="(goods, index) in searchList" :key="index" @click.native="goTo(goods.id)">
              <img slot="img" v-lazy="goods.path">
              <p slot="title" class="goods-name">{{goods.goods_name}}</p> 
              <p slot="other" class="yd-price"><em>¥</em>{{goods.goods_price | currency}}</p>
            </yd-list-item>
          </yd-list>
        </article>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip">亲！已经到底了！！再拉就漏喽~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <p slot="loadingTip">加载中...</p>
    </yd-infinitescroll>
  </yd-layout>
</template>

<script>
  import { apiSearch } from 'js/api'
  import { mapActions, mapGetters } from 'vuex'

  export default {
    data() {
      return {
        searchParams: { // 搜索需要参数
          searchType: 'goods',
          keyword: '',
          orderBy: 'goods_current_price',
          orderType: 'desc',
          currentPage: '1',
          type: '2'
        },
        searchList: [] // 搜索结果列表
      }
    },
    created() {
      // 提取url中的搜索参数
      this.searchParams.searchType = this.$route.params.type
      this.searchParams.keyword = decodeURIComponent(this.$route.query.keyword || '')
      this.fetchSearch()
    },
    methods: {
      onChangeTab(hash) {
        this.searchParams.orderBy = hash
      },

      // 切换商品(品牌)搜索的tab
      onSearchByOrder(order) {
        this.searchParams.orderBy = order
        if (order === 'goods_current_price' && this.searchParams.orderType === 'desc') {
          this.searchParams.orderType = 'asc'
        } else if (order === 'goods_current_price' && this.searchParams.orderType === 'asc') {
          this.searchParams.orderType = 'desc'
        }
        this.searchParams.currentPage = 1
        this.searchList = []
        this.fetchSearch()
      },

      // 下拉加载
      loadList() {
        this.fetchSearch()
      },
      fetchSearch() {
        apiSearch(this.searchParams).then(data => {
          document.getElementById('scrollView').scrollTop = 0
          const oData = data || {}
          this.searchList = this.searchList.concat(oData.goodsList)
          if (this.searchParams.currentPage >= oData.totalPage) {
            this.$refs.infiniteScroll && this.$refs.infiniteScroll.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          this.$refs.infiniteScroll && this.$refs.infiniteScroll.$emit('ydui.infinitescroll.finishLoad')
          this.searchParams.currentPage++
        })
      },
      goTo(id) {
        this.$router.push(`/goods/${id}`)
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .goods-list {
    background: #fff;
    .yd-list-item {
      div {
        border: 1px solid #ddd;
      }
      .yd-list-mes {
        padding: 0.15rem 0.2rem;
        border-top: 0px;
        text-align: center;
        color: #ef5c6e;
        div {
          border: 0;
          text-align: center;
        }
      }
    }
  }
  .m-srh-box {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    padding-left: 0;
    height: .5rem;
    border-radius: 0 !important;
    background: #f4f4f4;
    .yd-cell-right {
      padding-left: .1rem;
      min-height: 0;
    }
  }
  .m-search-tab-list.screen {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #E1E1E1;
    button {
      border-bottom: none;
      span {
        position: absolute;
        right: -18px;
        border: 5px solid transparent;
      }
      .t {
        top: .22rem;
        border-bottom-color: #c6c6c6;
        &.cur {
          border-bottom-color: #f00385;
        }
      }
      .b {
        top: .47rem;
        border-top-color: #c6c6c6;
        &.cur {
          border-top-color: #f00385;
        }
      }
      img {
        width: .28rem;
        vertical-align: middle;
      }
    }
  }
  .m-search-tab-list {
    @include flex(around);
    padding: 0 .24rem;
    height: .88rem;
    background: #fff;
    text-align: center;
    // margin-top: 0.1rem;
    border-top: 1px dashed #EFEFEF;
    button {
      position: relative;
      height: .88rem;
      border-bottom: 2px solid transparent;
      color: #666;
      &.active {
        color: #f00385;
        border-bottom-color: #f00385;
      }
      &.year {
        span {
          position: absolute;
          right: -12px;
          border: 5px solid transparent;
        }
        .t {
          top: .22rem;
          border-bottom-color: #c6c6c6;
          &.cur {
            border-bottom-color: #f00385;
          }
        }
        .b {
          top: .47rem;
          border-top-color: #c6c6c6;
          &.cur {
            border-top-color: #f00385;
          }
        }
      }
    }
  }
</style>